<div>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h2 *ngIf="account" [translateValues]="{ username: account.login }" jhiTranslate="settings.title">User
                settings for [<b>{{ account.login }}</b>]</h2>

            <div *ngIf="success" class="alert alert-success" jhiTranslate="settings.messages.success">
                <strong>Settings saved!</strong>
            </div>

            <jhi-alert-error></jhi-alert-error>

            <form (ngSubmit)="save()" *ngIf="account" [formGroup]="settingsForm" name="form" novalidate role="form">
                <div class="form-group">
                    <label class="form-control-label" for="firstName" jhiTranslate="settings.form.firstname">First
                        Name</label>
                    <input class="form-control" formControlName="firstName" id="firstName" name="firstName"
                           placeholder="{{ 'settings.form.firstname.placeholder' | translate }}"
                           type="text">

                    <div *ngIf="settingsForm.get('firstName')!.invalid && (settingsForm.get('firstName')!.dirty || settingsForm.get('firstName')!.touched)">
                        <small *ngIf="settingsForm.get('firstName')?.errors?.required"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.firstname.required">
                            Your first name is required.
                        </small>

                        <small *ngIf="settingsForm.get('firstName')?.errors?.minlength"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.firstname.minlength">
                            Your first name is required to be at least 1 character.
                        </small>

                        <small *ngIf="settingsForm.get('firstName')?.errors?.maxlength"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.firstname.maxlength">
                            Your first name cannot be longer than 50 characters.
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="lastName" jhiTranslate="settings.form.lastname">Last
                        Name</label>
                    <input class="form-control" formControlName="lastName" id="lastName" name="lastName"
                           placeholder="{{ 'settings.form.lastname.placeholder' | translate }}"
                           type="text">

                    <div *ngIf="settingsForm.get('lastName')!.invalid && (settingsForm.get('lastName')!.dirty || settingsForm.get('lastName')!.touched)">
                        <small *ngIf="settingsForm.get('lastName')?.errors?.required"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.lastname.required">
                            Your last name is required.
                        </small>

                        <small *ngIf="settingsForm.get('lastName')?.errors?.minlength"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.lastname.minlength">
                            Your last name is required to be at least 1 character.
                        </small>

                        <small *ngIf="settingsForm.get('lastName')?.errors?.maxlength"
                               class="form-text text-danger"
                               jhiTranslate="settings.messages.validate.lastname.maxlength">
                            Your last name cannot be longer than 50 characters.
                        </small>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-control-label" for="email" jhiTranslate="global.form.email.label">Email</label>
                    <input class="form-control" formControlName="email" id="email" name="email"
                           placeholder="{{ 'global.form.email.placeholder' | translate }}"
                           type="email">

                    <div *ngIf="settingsForm.get('email')!.invalid && (settingsForm.get('email')!.dirty || settingsForm.get('email')!.touched)">
                        <small *ngIf="settingsForm.get('email')?.errors?.required"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.required">
                            Your email is required.
                        </small>

                        <small *ngIf="settingsForm.get('email')?.errors?.email"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.invalid">
                            Your email is invalid.
                        </small>

                        <small *ngIf="settingsForm.get('email')?.errors?.minlength"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.minlength">
                            Your email is required to be at least 5 characters.
                        </small>

                        <small *ngIf="settingsForm.get('email')?.errors?.maxlength"
                               class="form-text text-danger"
                               jhiTranslate="global.messages.validate.email.maxlength">
                            Your email cannot be longer than 100 characters.
                        </small>
                    </div>
                </div>

                <div *ngIf="languages && languages.length > 0" class="form-group">
                    <label for="langKey" jhiTranslate="settings.form.language">Language</label>
                    <select class="form-control" formControlName="langKey" id="langKey" name="langKey">
                        <option *ngFor="let language of languages" [value]="language">{{ language | findLanguageFromKey
                            }}
                        </option>
                    </select>
                </div>

                <button [disabled]="settingsForm.invalid" class="btn btn-primary" jhiTranslate="settings.form.button"
                        type="submit">Save
                </button>
            </form>
        </div>
    </div>
</div>
